<template>
  <div class="message">
    <nav class="nav">
      <p class="title">消息</p>
    </nav>
    <div class="content-list">
      <ul class="content-list-ul">
        <li @click="praiseHandler">
          <i class="yo-ico">&#xe612;</i>
          <b>赞</b>
        </li>
        <li @click="commontHandler">
          <i class="yo-ico">&#xe630;</i>
          <b>评论</b>
        </li>
        <li @click="followerHandler">
          <i class="yo-ico">&#xe630;</i>
          <b>粉丝</b>
        </li>
        <li @click="noticeHandler">
          <i class="yo-ico">&#xe630;</i>
          <b>通知</b>
        </li>
      </ul>
    </div>
    <div class="container">
      <div class="list-content">
        <!-- <router-link to="/Msg">
            <router-view :list="list"></router-view>
        </router-link> -->
        <!-- <router-view></router-view> -->
        <msg :list="list"></msg>
      </div>
        
    </div>
  </div>
</template>

<script>
import Msg from './Msg'
export default {
    data(){
        return{
            list:[],
        }
    },
    components:{
        Msg
    },
    created(){
        this.$axios({
                method:'get',
                url:'/js/news-notice.json',
                data:""
            }).then((response) =>{          
                //  console.log(response.data.data) 
                this.list=response.data.data
                console.log(this.list);
            }).catch((error) =>{
                console.log("访问失败")       
        })    

  },
    methods:{
        praiseHandler(){
            this.$router.push('/praise');
        },
        commontHandler(){
            this.$router.push('./commont');
        },
        followerHandler(){
            this.$router.push('./follower');
        },
        noticeHandler(){
            this.$router.push('./notice');
        }

    }
}
</script>

<style lang="stylus" scoped>
@import '../../assets/stylus/border.styl';
.message
    display flex 
    flex-direction column
    .content-list-ul
        flex 90
        height .9rem
        padding 0 .1rem .2rem .1rem
        display flex 
        flex-direction row
        li
            flex 1
            font-size .12rem
            display flex 
            flex-direction column
            text-align center
            align-items center
            font-size .4rem
            i 
                color #D99C4A
            b
                font-size .14rem
    .container
        flex 584
        width 100%
        .list-content
            overflow scroll
            height 5.5rem
            width 100%
</style>